<!doctype html>
<html>
  <head>
    <title>Google+ Hangout Extension Arduino Example</title>
        
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!--<script src="public/jquery.min.js"></script>-->
    
    
  </head>
  <body>
    
    <script>
    
        /*
        Google+ Hangout Extension / Interactive Web App Demo
        ---
        This is the client-side javascript. It changes the
        colours and lets the websocket know when a button
        was pressed.
        
        This is based off of node-session by John Schimmel
        https://github.com/johnschimmel/node-session
        */
    
      var HTTP_PORT = 8126; // TODO: add your http port here
    
      function message(obj){

      	if( obj.message && window.console && console.log ) console.log(obj.message[0], obj.message[1]);
        
        // this is when you are pressing the button (orange)

        if (typeof(obj.message) !== "undefined" && obj.message !== null && obj.message[0] == "you") {
        
            if(obj.message[1] == "1") {
                jQuery('#turnlegright').css('background-color','#FF6900'); // orange
                jQuery('#turnlegleft, #turnheadup, #turnheaddown, #turngreenledon, #turnredledon, #turnallledoff').css('background-color','#005790'); // original
            } else if(obj.message[1] == "2") {
                jQuery('#turnlegleft').css('background-color','#FF6900'); // orange
                jQuery('#turnlegright,#turnheadup, #turnheaddown, #turngreenledon, #turnredledon, #turnallledoff').css('background-color','#005790'); // original
            } else if(obj.message[1] == "3") {
                jQuery('#turnheadup').css('background-color','#FF6900'); // orange
                jQuery('#turnlegright, #turnlegleft, #turnheaddown, #turngreenledon, #turnredledon, #turnallledoff').css('background-color','#005790'); // original
            } else if(obj.message[1] == "4") {
                jQuery('#turnheaddown').css('background-color','#FF6900'); // orange
                jQuery('#turnlegright, #turnlegleft, #turnheadup, #turngreenledon, #turnredledon, #turnallledoff').css('background-color','#005790'); // original
            } else if(obj.message[1] == "5") {
                jQuery('#turngreenledon').css('background-color','#FF6900'); // orange
                jQuery('#turnlegright, #turnlegleft, #turnheadup, #turnheaddown, #turnredledon, #turnallledoff').css('background-color','#005790'); // original
            } else if(obj.message[1] == "6") {
                jQuery('#turnredledon').css('background-color','#FF6900'); // orange
                jQuery('#turnlegright, #turnlegleft, #turnheadup, #turnheaddown, #turngreenledon, #turnallledoff').css('background-color','#005790'); // original
            } else if(obj.message[1] == "7") {
                jQuery('#turnallledoff').css('background-color','#FF6900'); // orange
                jQuery('#turnlegright, #turnlegleft, #turnheadup, #turnheaddown, #turngreenledon, #turnredledon').css('background-color','#005790'); // original
            }
            
        // this is when someone else on the websockets is pressing the button (green)
        } else if (typeof(obj.message) !== "undefined" && obj.message !== null && obj.message[0] != "arduino" && obj.message[0] != "you") {
            			
            if(obj.message[1] == "1") {
                jQuery('#turnlegright').css('background-color','#38FF00'); // green
                jQuery('#turnlegleft, #turnheadup, #turnheaddown, #turngreenledon, #turnredledon, #turnallledoff').css('background-color','#005790'); // original
            } else if(obj.message[1] == "2") {
                jQuery('#turnlegleft').css('background-color','#38FF00'); // green
                jQuery('#turnlegright,#turnheadup, #turnheaddown, #turngreenledon, #turnredledon, #turnallledoff').css('background-color','#005790'); // original
            } else if(obj.message[1] == "3") {
                jQuery('#turnheadup').css('background-color','#38FF00'); // green
                jQuery('#turnlegright, #turnlegleft, #turnheaddown, #turngreenledon, #turnredledon, #turnallledoff').css('background-color','#005790'); // original
            } else if(obj.message[1] == "4") {
                jQuery('#turnheaddown').css('background-color','#38FF00'); // green
                jQuery('#turnlegright, #turnlegleft, #turnheadup, #turngreenledon, #turnredledon, #turnallledoff').css('background-color','#005790'); // original
            } else if(obj.message[1] == "5") {
                jQuery('#turngreenledon').css('background-color','#38FF00'); // green
                jQuery('#turnlegright, #turnlegleft, #turnheadup, #turnheaddown, #turnredledon, #turnallledoff').css('background-color','#005790'); // original
            } else if(obj.message[1] == "6") {
                jQuery('#turnredledon').css('background-color','#38FF00'); // green
                jQuery('#turnlegright, #turnlegleft, #turnheadup, #turnheaddown, #turngreenledon, #turnallledoff').css('background-color','#005790'); // original
            } else if(obj.message[1] == "7") {
                jQuery('#turnallledoff').css('background-color','#38FF00'); // green
                jQuery('#turnlegright, #turnlegleft, #turnheadup, #turnheaddown, #turngreenledon, #turnredledon').css('background-color','#005790'); // original
            }			
            
        }
        
      }
	  
      // send out turn right to the socket
      function turnServoLegRight(fnum) {
          socket.send(fnum);
          message({ message: ['you', fnum] });
      }	 

      // send out turn left to the socket
      function turnServoLegLeft(fnum) {
          socket.send(fnum);
          message({ message: ['you', fnum] });
      }	

      // send out turn up to the socket
      function turnServoHeadUp(fnum) {
          socket.send(fnum);
          message({ message: ['you', fnum] });
      }	

      // send out turn down to the socket
      function turnServoHeadDown(fnum) {
          socket.send(fnum);
          message({ message: ['you', fnum] });
      }		  
      
      // send out turn green on to the socket
      function turnGreenLEDOn(fnum) {
          socket.send(fnum);
          message({ message: ['you', fnum] });
      }
      
      // send out turn red on to the socket
      function turnRedLEDOn(fnum) {
          socket.send(fnum);
          message({ message: ['you', fnum] });
      }
	  
      // send out turn leds off to the socket
      function turnAllLEDOff(fnum) {
          socket.send(fnum);
          message({ message: ['you', fnum] });
      }	  
      
      // 'fnum' is good to have when it is multiple buttons
      function touchHandler(fnum, e) {
          if(fnum == 1) {
            turnServoLegRight(1);
          } else if(fnum == 2) {
            turnServoLegLeft(2);
          } else if(fnum == 3) {
            turnServoHeadUp(3);
          } else if(fnum == 4) {
            turnServoHeadDown(4);
          } else if(fnum == 5) {
            turnGreenLEDOn(5);
          } else if(fnum == 6) {
            turnRedLEDOn(6);
          } else {
            turnAllLEDOff(7);
          }
      }
      
      
      // -- SOCKET -- //
      
      var socket = new io.connect(null, { port: HTTP_PORT, rememberTransport: false});
      //var socket = io.connect('http://localhost/');
      socket.on('message', function(obj){
      	
      	message(obj);

      });
      
      socket.on('alert-join', function (data) {
		$('#clientcount').text("Users looking at this page: " + data);
        });
    
      // various alerts  
      socket.on('connect', function(){ message({ message: ['System', 'Connected']})});
      socket.on('disconnect', function(){ message({ message: ['System', 'Disconnected']})});
      socket.on('reconnect', function(){ message({ message: ['System', 'Reconnected to server']})});
      socket.on('reconnecting', function( nextRetry ){ message({ message: ['System', 'Attempting to re-connect to the server, next attempt in ' + nextRetry + 'ms']})});
      socket.on('reconnect_failed', function(){ message({ message: ['System', 'Reconnected to server FAILED.']})});
      
      jQuery('document').ready(function(){
	  
		  jQuery(document).bind('keypress', function (e) {			
			var wichKey = e.which;
			console.log(wichKey);
			switch (wichKey) { 
				case 49: 
					turnServoLegRight(1);
					break;
				case 50: 
					turnServoLegLeft(2);
					break;
				case 51: 
					turnServoHeadUp(3);
					break;      
				case 52: 
					turnServoHeadDown(4);
					break;
				case 53: 
					turnGreenLEDOn(5);
					break;
				case 54: 
					turnRedLEDOn(6);
					break;
				default:
					turnAllLEDOff(7);
			}
		  });
	  
	      jQuery('#turnlegright').mousedown(function() {
              turnServoLegRight(1);
          });
		  
	      jQuery('#turnlegleft').mousedown(function() {
              turnServoLegLeft(2);
          });

	      jQuery('#turnheadup').mousedown(function() {
              turnServoHeadUp(3);
          });

	      jQuery('#turnheaddown').mousedown(function() {
              turnServoHeadDown(4);
          });		  
      
          jQuery('#turngreenledon').mousedown(function() {
              turnGreenLEDOn(5);
          });
		  
          jQuery('#turnredledon').mousedown(function() {
              turnRedLEDOn(6);
          });		  
                    
          jQuery('#turnallledoff').mousedown(function() {
              turnAllLEDOff(7);
          });
                    
        //add in iphone mobile safari touch events
        document.getElementById("turnlegright").addEventListener("touchstart", touchHandler, 1, false);
        document.getElementById("turnlegright").addEventListener("touchmove", touchHandler, 1, false);

        document.getElementById("turnlegleft").addEventListener("touchstart", touchHandler, 0, false);
        document.getElementById("turnlegleft").addEventListener("touchmove", touchHandler, 0, false);
		
        document.getElementById("turnheadup").addEventListener("touchstart", touchHandler, 0, false);
        document.getElementById("turnheadup").addEventListener("touchmove", touchHandler, 0, false);

        document.getElementById("turnheaddown").addEventListener("touchstart", touchHandler, 0, false);
        document.getElementById("turnheaddown").addEventListener("touchmove", touchHandler, 0, false);

        document.getElementById("turngreenledon").addEventListener("touchstart", touchHandler, 0, false);
        document.getElementById("turngreenledon").addEventListener("touchmove", touchHandler, 0, false);

        document.getElementById("turnredledon").addEventListener("touchstart", touchHandler, 0, false);
        document.getElementById("turnredledon").addEventListener("touchmove", touchHandler, 0, false);

        document.getElementById("turnallledoff").addEventListener("touchstart", touchHandler, 0, false);
        document.getElementById("turnallledoff").addEventListener("touchmove", touchHandler, 0, false);		
        
      })
    </script>
    
    <div class="wrapper">
    
    <center>
	
	<div class="servo" id="turnlegright">
    <p>Turn leg right</p>
    </div>
	
	<div class="servo" id="turnlegleft">
    <p>Turn leg left</p>
    </div>
	
	<div class="servo" id="turnheadup">
    <p>Turn head up</p>
    </div>
	
	<div class="servo" id="turnheaddown">
    <p>Turn head down</p>
    </div>
    
    <div class="led" id="turngreenledon">
    <p>Turn green led on</p>
    </div>
    
    <div class="led" id="turnredledon">
    <p>Turn red led on</p>
    </div>
	
	<div class="led" id="turnallledoff">
    <p>Turn all led off</p>
    </div>
    
    <div class="info" id="clientcount">
    Users looking at this page: 0
    </div>
    
    </center>
    
    </div>
    
    <style>
        body { 
            margin:0px;
            padding:0px;
            font-family:'Helvetica';
            font-size:30px;
            width:300px;
	        height:100%;
        }
        .wrapper {
	        width:300px;
	        height:100%;
	        background-color: #BBC0D1;
	    }
        .led, .servo {
	        border:2px solid black;
            padding:10px;
            text-align:center;
            margin:0px;
            margin-top:15px;
            margin-bottom:15px;
            color: #111;
            width:240px;
            height:30px;
            cursor: pointer;
        }
        #turnlegright, #turnheadup, #turngreenledon, #turnredledon {
	        background-color: #005790;
        }
        #turnlegleft, #turnheaddown, #turnallledoff {
	        background-color: #005790;
        }
        .led p, .servo p {
            margin:0px;
	        padding-top:0px;
        }
        .info {
        	padding-top: 10px;
        	font-size: 0.4em;
        }
        ::selection {
	        background: #FF0119;
	    }
        ::-moz-selection {
	        background: #FF0119; 
        }
    </style>
    
  </body>
</html>
